<template>
  <view class="fu-order-list">
    <!-- 状态标签栏 -->
    <view class="fu-order-list__tabs">
      <view 
        v-for="(tab, index) in tabs"
        :key="index"
        class="fu-order-list__tab"
        :class="{ 'is-active': currentTab === tab.value }"
        @tap="onTabChange(tab.value, index)"
      >
        <text class="fu-order-list__tab-text">{{ tab.text }}</text>
      </view>
      <!-- 滑块 -->
      <view 
        class="fu-order-list__slider" 
        :style="{ transform: `translateX(${sliderLeft}px)` }"
      ></view>
    </view>
    
    <!-- 订单列表 -->
    <view class="fu-order-list__content">
      <view 
        v-for="(item, index) in filteredOrders" 
        :key="item.id"
        class="fu-order"
      >
        <!-- 订单头部 -->
        <view class="fu-order__header">
          <view class="fu-order__shop">
            <fu-icon name="shop" size="32" color="#666" />
            <text class="fu-order__shop-name">{{ item.shopName }}</text>
            <fu-icon name="arrow-right" size="28" color="#999" />
          </view>
          <text class="fu-order__status">{{ item.status }}</text>
        </view>
        
        <!-- 订单商品 -->
        <view 
          class="fu-order__goods"
          @tap="onOrderClick(item)"
        >
          <image 
            class="fu-order__goods-image" 
            :src="item.goods[0].image" 
            mode="aspectFill"
          />
          <view class="fu-order__goods-info">
            <view class="fu-order__goods-name">{{ item.goods[0].name }}</view>
            <view class="fu-order__goods-attrs">{{ item.goods[0].attrs }}</view>
            <view class="fu-order__goods-price">
              <text class="fu-order__goods-symbol">¥</text>
              <text class="fu-order__goods-number">{{ item.goods[0].price }}</text>
              <text class="fu-order__goods-count">x{{ item.goods[0].count }}</text>
            </view>
          </view>
        </view>
        
        <!-- 商品数量和总价 -->
        <view class="fu-order__total">
          <text class="fu-order__count">共{{ item.totalCount }}件商品</text>
          <text class="fu-order__amount">
            实付款
            <text class="fu-order__symbol">¥</text>
            <text class="fu-order__price">{{ item.totalAmount }}</text>
          </text>
        </view>
        
        <!-- 订单操作按钮 -->
        <view class="fu-order__actions">
          <view 
            v-for="(btn, btnIndex) in getOrderButtons(item.status)"
            :key="btnIndex"
            class="fu-order__btn"
            :class="[`fu-order__btn--${btn.type}`]"
            @tap="onButtonClick(btn.action, item)"
          >
            {{ btn.text }}
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <fu-load-more :status="loadMoreStatus" />
  </view>
</template>

<script>
/**
 * @description 订单列表组件
 * @property {Array} orders 订单列表数据
 * @property {String} loadMoreStatus 加载更多状态
 * @event {Function} click 点击订单时触发
 * @event {Function} buttonClick 点击按钮时触发
 */
export default {
  name: 'FuOrderList',
  
  mounted() {
    // 初始化滑块位置
    this.$nextTick(() => {
      const index = this.tabs.findIndex(tab => tab.value === this.currentTab)
      if (index > -1) {
        this.updateSliderPosition(index)
      }
    })
  },
  
  props: {
    orders: {
      type: Array,
      default: () => []
    },
    loadMoreStatus: {
      type: String,
      default: 'more'
    },
    // 当前选中的标签
    modelValue: {
      type: String,
      default: 'all'
    }
  },
  
  data() {
    return {
      sliderLeft: 0,
      tabs: [
        { text: '全部', value: 'all' },
        { text: '待付款', value: 'unpaid' },
        { text: '待发货', value: 'unshipped' },
        { text: '待收货', value: 'unreceived' },
        { text: '待评价', value: 'unrated' }
      ]
    }
  },
  
  computed: {
    currentTab: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue', val)
      }
    },
    // 根据当前标签过滤订单
    filteredOrders() {
      if (this.currentTab === 'all') {
        return this.orders
      }
      return this.orders.filter(order => order.status === this.currentTab)
    }
  },
  
  methods: {
    // 切换标签
    onTabChange(value, index) {
      this.currentTab = value
      this.$emit('tabChange', value)
      // 计算滑块位置
      this.updateSliderPosition(index)
    },
    
    // 更新滑块位置
    updateSliderPosition(index) {
      // 获取单个tab的宽度
      const windowWidth = uni.getSystemInfoSync().windowWidth
      const tabWidth = windowWidth / this.tabs.length
      // 计算滑块的左偏移量
      // 滑块宽度为40rpx，需要转换为px
      const sliderWidth = 40 * (windowWidth / 750)
      const centerOffset = (tabWidth - sliderWidth) / 2
      this.sliderLeft = (index * tabWidth) + centerOffset
    },
    
    // 获取订单按钮
    getOrderButtons(status) {
      const buttons = {
        // 待付款
        unpaid: [
          { text: '取消订单', type: 'default', action: 'cancel' },
          { text: '立即付款', type: 'primary', action: 'pay' }
        ],
        // 待发货
        unshipped: [
          { text: '提醒发货', type: 'default', action: 'remind' }
        ],
        // 待收货
        unreceived: [
          { text: '查看物流', type: 'default', action: 'logistics' },
          { text: '确认收货', type: 'primary', action: 'confirm' }
        ],
        // 待评价
        unrated: [
          { text: '删除订单', type: 'default', action: 'delete' },
          { text: '评价晒单', type: 'primary', action: 'rate' }
        ],
        // 已完成
        completed: [
          { text: '删除订单', type: 'default', action: 'delete' },
          { text: '再次购买', type: 'primary', action: 'rebuy' }
        ]
      }
      return buttons[status] || []
    },
    
    // 点击订单
    onOrderClick(order) {
      this.$emit('click', order)
    },
    
    // 点击按钮
    onButtonClick(action, order) {
      this.$emit('buttonClick', { action, order })
    }
  }
}
</script>

<style lang="scss">
.fu-order-list {
  
  &__tabs {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    height: 88rpx;
    background-color: #fff;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
  }
  
  &__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    &.is-active {
      color: #ff4444;
      font-weight: 500;
    }
  }
  
  &__tab-text {
    font-size: 28rpx;
    color: #333;
  }
  
  &__content {
    padding: 20rpx;
  }
}

.fu-order {
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  background-color: #fff;
  overflow: hidden;
  
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border-bottom: 1px solid #f5f5f5;
  }
  
  &__shop {
    display: flex;
    align-items: center;
    gap: 12rpx;
  }
  
  &__shop-name {
    font-size: 28rpx;
    color: #333;
  }
  
  &__status {
    font-size: 28rpx;
    color: #ff4444;
  }
  
  &__goods {
    display: flex;
    padding: 20rpx;
    border-bottom: 1px solid #f5f5f5;
    
    &:active {
      background-color: #f8f8f8;
    }
  }
  
  &__goods-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }
  
  &__goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  &__goods-name {
    font-size: 28rpx;
    color: #333;
    line-height: 1.4;
    margin-bottom: 8rpx;
  }
  
  &__goods-attrs {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
  }
  
  &__goods-price {
    display: flex;
    align-items: baseline;
  }
  
  &__goods-symbol {
    font-size: 24rpx;
    color: #333;
  }
  
  &__goods-number {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
  
  &__goods-count {
    font-size: 24rpx;
    color: #999;
    margin-left: auto;
  }
  
  &__total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
    border-bottom: 1px solid #f5f5f5;
  }
  
  &__count {
    font-size: 24rpx;
    color: #999;
    margin-right: 20rpx;
  }
  
  &__amount {
    font-size: 24rpx;
    color: #333;
  }
  
  &__symbol {
    font-size: 24rpx;
    color: #ff4444;
    margin-left: 8rpx;
  }
  
  &__price {
    font-size: 32rpx;
    color: #ff4444;
    font-weight: 500;
  }
  
  &__actions {
    display: flex;
    justify-content: flex-end;
    gap: 20rpx;
    padding: 20rpx;
  }
  
  &__btn {
    min-width: 160rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-radius: 32rpx;
    
    &--default {
      color: #666;
      background-color: #f5f5f5;
      
      &:active {
        opacity: 0.7;
      }
    }
    
    &--primary {
      color: #fff;
      background: linear-gradient(135deg, #ff4444, #ff1111);
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}

.fu-order-list__slider {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40rpx;
  height: 4rpx;
  background-color: #ff4444;
  border-radius: 2rpx;
  transition: transform 0.3s;
}
</style> 